<template>
	<view class="page page-primary">
		<page-header theme="colorful"></page-header>
		<view class="page-content">
			<!-- 头部卡片 -->
			<view class="page-card-div page-top">
				<view class="card-title row-flex">
					<image class="img-icon" src="/static/images/icon-gs.png" />
					<view>{{ companyData.title }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">社会信用代码</view>
					<view class="card-row-right">{{ companyData.code }}</view>
				</view>
				<view class="card-tags row-flex authentication">
					<fui-tag text="公司认证" type="danger" background="#fff4e5" color="#FCAD4C"></fui-tag>
					<!-- <fui-tag text="银行认证" type="danger" background="#e3faf8" color="#3CDBCD"></fui-tag> -->
				</view>
			</view>
			<view class="card-label">
				<view class="page-title">基本信息</view>
				<!-- <fui-icon @click="jumpUpdate(0)" class="card-label-icon" custom-prefix="iconfont" size="40"
					color="var(--fui-color-primary)" name="vms-icon-edit"></fui-icon> -->
			</view>
			<view class="page-card-div card-mag">
				<view class="card-row row-flex">
					<view class="card-row-left">社会信用代码</view>
					<view class="card-row-right">{{ companyData.code }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">公司名称</view>
					<view class="card-row-right">{{ companyData.title }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">公司地址</view>
					<view class="card-row-right">{{
			  companyData.address
          }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">运营范围</view>
					<view class="card-row-right">{{
			  companyData.areaIds
		  }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">运营品类</view>
					<view class="card-row-right">{{
			  companyData.productCategoryIds
		  }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">公司描述</view>
					<view class="card-row-right">{{companyData.description}}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">营业执照</view>
					<view class="card-view">
						<view class="text-blue" @click="check('img',companyData.businessLicense)">查看营业执照</view>
						<!-- <fui-icon class="card-view-icon" custom-prefix="iconfont" size="40" color="var(--fui-color-primary)"
							name="vms-icon-yanjing-biyan"></fui-icon> -->
					</view>
				</view>
			</view>
			<view class="card-label">
				<view class="page-title">法人信息</view>
			</view>
			<view class="page-card-div card-mag">
				<view class="card-row row-flex">
					<view class="card-row-left">姓名</view>
					<view class="card-row-right">{{ companyData.corporateName }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">联系方式</view>
					<view class="card-row-right">{{
            maskPhoneNumber(companyData.corporatePhone)
          }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">身份证号</view>
					<view class="card-row-right">{{
            maskIdCardNumber(companyData.corporateID)
          }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">法人证件</view>
					<view class="card-view">
						<view class="text-blue" @click="check('ID',companyData.idcBack,companyData.idcFront)">查看法人证件
						</view>
						<!-- <fui-icon class="card-view-icon" custom-prefix="iconfont" size="40" color="var(--fui-color-primary)"
							name="vms-icon-yanjing-biyan"></fui-icon> -->
					</view>
				</view>
			</view>
			<view class="card-label">
				<view class="page-title">负责人信息</view>
				<fui-icon @click="jumpUpdate(0)" class="card-label-icon" custom-prefix="iconfont" size="40"
					color="var(--fui-color-primary)" name="vms-icon-edit"></fui-icon>
			</view>
			<view class="page-card-div card-mag">
				<view class="card-row row-flex">
					<view class="card-row-left">姓名</view>
					<view class="card-row-right">{{ companyData.headName }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">联系方式</view>
					<view class="card-row-right">{{
            maskPhoneNumber(companyData.headPhone)
          }}</view>
				</view>
				<view class="card-row row-flex">
					<view class="card-row-left">身份证号</view>
					<view class="card-row-right">{{
            maskIdCardNumber(companyData.headID)
          }}</view>
				</view>
			</view>
		</view>

		<!-- 查看证件弹窗 -->
		<fui-backdrop :show="isShow" closable @click="close">
			<checkPopup :childProp="popContent"></checkPopup>
		</fui-backdrop>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
    inject
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import CheckPopup from "@/components/popup/check";
	import pageHeader from "@/components/header";
	import {
		useStore
	} from 'vuex';
	import staffApi from '@/api/staff.js'
	import { maskPhoneNumber, maskIdCardNumber } from "@/utils/tools";
	
	const store = useStore();
  const modal = inject('$modal');

	onShow(() => {
		getCompanyInfo()
		getAdminInfo()
	});
	console.log(store.getters);
	// 公司信息
	const companyData = ref({
		title: "",
		code: "",
		loginPhone: "",
		address: "",
		description: "",
		businessLicense: '',
		areaIds: '',
		productCategoryIds: '',
		// 法人信息
		corporateName: "",
		corporatePhone: "",
		corporateID: "",
		idcFront: "",
		idcBack: "",
		// 负责人信息
		headName: "",
		headPhone: "",
		headID: "",
		adminCardBack: '',
		adminCardFront: '',
		id: ''
	});

	// 获取公司信息
	const companyApiUrl = computed(() => {
		let apiUrl = ''
		if (store.getters.userType === '1') apiUrl = 'getSupplyInfo' // 供应链
		if (store.getters.userType === '2') apiUrl = 'getSupplierInfo' // 供应商
		return apiUrl
	})
	const getCompanyInfo = () => {
		staffApi[companyApiUrl.value](store.getters.companyId, store.getters.currentDeptId).then((res) => {
      try {
        if (res.code == 0) {
          if(store.getters.userType === '1'){
            companyData.value.title = res.data.info.name
            companyData.value.code = res.data.info.creditCode
            companyData.value.address = res.data.info.address
            companyData.value.description = res.data.info.description
            companyData.value.businessLicense = res.data.info.businessLicense
            let areaList = res.data.info.manageScope ? res.data.info.manageScope.split('|') : []
            areaList = areaList.map(item => item.replace(/[^\u4e00-\u9fa5]/gi, ""))
            companyData.value.areaIds = areaList.join(',')
            let categoryList = res.data.info.categoryRange ? res.data.info.categoryRange.split('|') : []
						categoryList = categoryList.map(item => item.replace(/[^\u4e00-\u9fa5]/gi, ""))
            companyData.value.productCategoryIds = categoryList.join(',')
            companyData.value.corporateName = res.data.info.corporationName
            companyData.value.corporatePhone = res.data.info.corporationPhone,
            companyData.value.corporateID = res.data.info.corporationIdCard,
            companyData.value.idcFront = res.data.info.idcFront
            companyData.value.idcBack = res.data.info.idcBack
            companyData.value.id = res.data.info.id
          }else{
            companyData.value.title = res.data.companyName
            companyData.value.code = res.data.creditCode
            companyData.value.address = res.data.address
            companyData.value.description = res.data.description
            companyData.value.businessLicense = res.data.businessLicense
            let areaList = res.data.yunyfw ? res.data.yunyfw.split('|') : []
            areaList = areaList.map(item => item.replace(/[^\u4e00-\u9fa5]/gi, ""))
            companyData.value.areaIds = areaList.join(',')
            let categoryList = res.data.yunypl ? res.data.yunypl.split('|') : []
            categoryList = categoryList.map(item => item.replace(/[^\u4e00-\u9fa5]/gi, ""))
            companyData.value.productCategoryIds = categoryList.join(',')
            companyData.value.corporateName = res.data.corporationName
            companyData.value.corporatePhone = res.data.corporationPhone,
            companyData.value.corporateID = res.data.corporationIdCard,
            companyData.value.idcFront = res.data.idcFront
            companyData.value.idcBack = res.data.idcBack
            companyData.value.id = res.data.id
          }
        }
      } catch (e) {
        console.log(e)
        modal.msgError('获取公司信息失败！')
      }
		})
	}

	// 获取负责人信息
	const adminApiUrl = computed(() => {
		let apiUrl = ''
		if (store.getters.userType === '1') apiUrl = 'getSupplyAdminDetail' // 供应链
		if (store.getters.userType === '2') apiUrl = 'getSupplierAdminDetail' // 供应商
		return apiUrl
	})
	const getAdminInfo = () => {
		staffApi[adminApiUrl.value](store.getters.companyId).then((res) => {
      try {
        if (res.code == 0) {
          companyData.value.adminId = res.data.id
          companyData.value.headName = res.data.adminName
					companyData.value.headPhone = res.data.adminPhone
					companyData.value.headID = res.data.adminIdCard
					companyData.value.adminCardBack = res.data.adminCardBack
					companyData.value.adminCardFront = res.data.adminCardFront
        }
      } catch (e) {
        console.log(e)
        modal.msgError('获取负责人信息失败！')
      }
		})
	}

	let isEyesOpen = ref(true);
	// 点击眼睛显示字段
	const eyesClick = (e) => {
		if (e == 1) {
			isEyesOpen.value = false;
		} else {
			isEyesOpen.value = true;
		}
	};

	// 查看弹窗
	const popContent = ref({});
	let isShow = ref(false);
	const close = () => {
    	popContent.value = {};
		isShow.value = false;
	};
	const check = (type, url, idurl) => {
		if (type == "img") {
			popContent.value = {
				type: "img",
				title: "查看营业执照",
				imgUrl: url,
			};
		} else {
			popContent.value = {
				type: "ID",
				title: "查看法人证件",
				imgUrl: url,
				imgUrl1: idurl,
			};
		}
		isShow.value = true;
	};

	// const jumpUpdate = (index) => {
	// 	switch (index) {
	// 		case 0:
	// 			uni.navigateTo({
	// 				url: `/pages/company/info_update/company?data=` + encodeURIComponent(JSON.stringify(
	// 					companyData.value)),
	// 			});
	// 			break;
	// 		default:
	// 			uni.navigateTo({
	// 				url: "/pages/company/info_update/director",
	// 			});
	// 	}
	// };
	const jumpUpdate = () => {
		uni.navigateTo({
			url: `/pages/company/info_update/director?data=` + encodeURIComponent(JSON.stringify(companyData
				.value))
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		&-top {
			.authentication {
				margin-top: 32rpx !important;
			}
		}

		.row-flex {
			display: flex;
			align-items: center;
		}

		.card-label {
			display: flex;
			align-items: center;

			&-icon {
				margin-left: 10rpx;
				margin-top: 8rpx;
			}
		}

		.card-view {
			display: flex;

			&-icon {
				margin-left: 15rpx;
				margin-top: -6rpx;
			}
		}

		.page-content {
			padding-bottom: 36rpx;

			.page-card-div {
				width: 100%;
				background: #ffffff;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 16rpx;

				.card-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;

					.img-icon {
						width: 40rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
				}

				.card-tags {
					margin: 16rpx 0 0;

					:deep(.fui-tag__wrap) {
						display: block;
						height: 32rpx !important;
						line-height: 32rpx !important;
						font-size: 20rpx !important;
						padding: 4rpx 16rpx !important;
						margin-right: 20rpx !important;
					}
				}

				.card-row {
					align-items: flex-start;
					margin-top: 24rpx;
					font-size: 24rpx;
					color: #999999;

					&-left {
						width: 170rpx;
					}

					&-right {
						width: calc(100% - 170rpx);
						color: #333333;
						font-weight: bold;

						.icon-close-eyes {
							color: var(--fui-color-primary);
						}
					}

					.text-blue {
						color: var(--fui-color-primary);
					}
				}
			}

			.page-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin: 30rpx 0 20rpx;
			}

			.card-mag {
				padding-top: 2rpx;
			}

			.btn-div {
				margin-top: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 40rpx;

				.btn {
					width: calc(25% - 20rpx) !important;
					height: 76rpx !important;
					flex: inherit;

					:deep(.fui-button__primary) {
						height: 76rpx !important;
					}
				}

				.btn-delete {
					:deep(.fui-button__primary) {
						border: 1px solid #f95a5a !important;
						background-color: #ffffff !important;
						color: #f95a5a !important;
					}
				}

				.btn-stop {
					:deep(.fui-button__primary) {
						border: 1px solid #f95a5a !important;
						background-color: #f95a5a !important;
						color: #ffffff !important;
					}
				}

				.btn-order {
					:deep(.fui-button__primary) {
						border: 1px solid var(--fui-color-primary) !important;
						background-color: #ffffff !important;
						color: var(--fui-color-primary) !important;
					}
				}
			}
		}
	}
</style>